<template>
    <div class="box">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="shi" label="市"> </el-table-column>
            <el-table-column prop="sheng" label="省"> </el-table-column>
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="num1" label="数值_1"> </el-table-column>
            <el-table-column prop="num2" label="数值_2"> </el-table-column>
            <el-table-column prop="num3" label="数值_2"> </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                {
                    date: '2016-05-02',
                    shi: '廊坊',
                    sheng: '河北',
                    num1: 3213,
                    num2: 743,
                    num3: 2345,
                },
                {
                    date: '2016-05-04',
                    shi: '保定',
                    sheng: '河北',

                    num1: 4342,
                    num2: 743,
                    num3: 2345,
                },
                {
                    date: '2016-05-01',
                    shi: '沧州',
                    sheng: '河北',

                    num1: 9342,
                    num2: 743,
                    num3: 2345,
                },
                {
                    date: '2016-05-02',
                    shi: '北京',
                    sheng: '直辖市',

                    num1: 6234,
                    num2: 743,
                    num3: 2345,
                },
            ],
        };
    },
};
</script>

<style lang="scss" scoped>
.box {
    width: calc(100% - 20px);
    height: 100%;
    margin: 10px;
}
</style>
